<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<script charset="utf-8" src="<%=request.getContextPath() %>/resource/js/style.js"></script>

<style type="text/css">
	   .menu-message-box { 
					  position:relative;   
					  width:400px; 
					  background:#f3f3f3; 
					  box-shadow:1px 2px 3px #E9FBE4; 
					  border:1px solid #c0c0c0; 
					  border-radius:4px; 
					  color:#000000; 
					  
		}
		.menu-triangle-border { 
					    position:absolute; 
					    top:15px; 
					    overflow:hidden; 
					    width:0; 
					    height:0; 
					    border-width:10px; 
					    border-style:dashed dashed dashed solid; 
		}
		
		.menu-tb-background { 
					    right:-20px; 
					    border-color:transparent transparent transparent #c0c0c0;
		}
		.menu-tb-border { 
				    right:-19px; 
					border-color: transparent transparent transparent #ffffff; 
		}
</style>

		<%-- 功能菜单区域 --%>
		<%-- <div id="menu-Items" style="width:410px; min-height: 48px; height:auto !important; height:48px; text-align: center; position: absolute; bottom: 20px; left: 0;">
			<a href="<%=request.getContextPath() %>/user/userInfoModifiy" target="_blank"><img src="../resource/images/map/user_info.png" lang="修改个人信息" title="修改个人信息" class="menu-Items-ItemImg"></a>
			<a href="javascript:xianshibiaoqian('select')"><img src="../resource/images/map/search.png" lang="查找" title="查找" class="menu-Items-ItemImg"></a>
			<a href="javascript:xianshibiaoqian('addArticle')"><img src="../resource/images/map/message.png" lang="发表新话题" title="发表新话题" class="menu-Items-ItemImg"></a>
			<a href="javascript:xianshibiaoqian('bangzhu')"><img src="../resource/images/map/catagory.png" lang="分类查看" title="分类查看" class="menu-Items-ItemImg"></a>
		</div> --%>
		
		<div id="menu-Items" style="width:50px; min-height: 48px; height:auto !important; height:100px; text-align: center; position: absolute; bottom: 0; left: 0;">
			<%-- <div><a href="<%=request.getContextPath() %>/user/userInfoModifiy" target="_blank"><img src="../resource/images/map/user_info.png" lang="修改个人信息" title="修改个人信息" class="menu-Items-ItemImg"></a></div>
			<div style="margin-top:4px;"><a href="javascript:xianshibiaoqian('addArticle')"><img src="../resource/images/map/message.png" lang="发表新话题" title="发表新话题" class="menu-Items-ItemImg"></a></div> --%>
			<div><a href="javascript:xianshibiaoqian('addArticle')"><img src="../resource/images/map/message.png" lang="发表新话题" title="发表新话题" class="menu-Items-ItemImg"></a></div>
			<div><a href="javascript:xianshibiaoqian('classifyShow')"><img src="../resource/images/map/catagory.png" lang="分类查看" title="分类查看" class="menu-Items-ItemImg"></a></div>
		</div>
		
		<!-- <div id="menu-itemName" style="width: 263px; height: 20px; text-align: center; position: absolute; bottom: 0; left: 80px; font-weight: bold; font-size: 14px;"></div> -->


			<!-- 隐藏的标签内容 -->
			<div id="classifyShow" class="menu-message-box"  style="width: 250px;height: 295px;background-color: #ffffff; cursor:pointer; position:absolute; z-index:1500; display: none;">
				<div class="menu-triangle-border menu-tb-background"></div>
				<div class="menu-triangle-border menu-tb-border"></div>
				<div style="font-size: 13px;font-weight: bold;color: blue;width: 250px;height: 25px;border-bottom: 1px solid #f8f8f8;">
					<span>这里有什么？</span><span onclick="hideDiv('classifyShow')" style="font-weight: bold; color: red;margin-left: 140px;font-size: 15px;">×</span>
				</div>
				<div id="color1"  style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:50px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color1')" onmouseout="huifucolor('color1')" onclick="setArticleCatagory('gou1')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/all.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;width: 90px;float: left; margin: 0px 0px 0px 5px">
						全部类型
					</span>
					<span id="gou1" class="gou" style="color: #ffd02a; display: block;width: 50px;float: left; ">
						√
					</span>
					<div style="clear: both;"></div>
				</div>
				<div id="color2"  style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color2')" onmouseout="huifucolor('color2')" onclick="setArticleCatagory('gou2')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/questions.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left;width: 90px; margin: 0px 0px 0px 5px">
						疑问解答
					</span>
					<span id="gou2" class="gou" style="color: #ffd02a; display: none;float: left;width: 50px; ">
						√
					</span>
					<div style="clear: both;"></div>
				</div>
				<div id="color3" style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color3')" onmouseout="huifucolor('color3')" onclick="setArticleCatagory('gou3')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/funny.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left;width: 90px; margin: 0px 0px 0px 5px">
						搞笑有趣
					</span>
					<span id="gou3" class="gou" style="color: #ffd02a; display: none;float: left;width: 50px ">
						√
					</span>
					<div style="clear: both;"></div>
				</div>
				<div id="color4" style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color4')" onmouseout="huifucolor('color4')" onclick="setArticleCatagory('gou4')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/foods.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left;width: 90px;margin: 0px 0px 0px 5px">
						吃喝玩乐
					</span>
					<span id="gou4" class="gou" style="color: #ffd02a; display: none;float: left;width: 50px ">
						√
					</span>
					<div style="clear: both;"></div>
				</div>
				<div id="color5" style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color5')" onmouseout="huifucolor('color5')" onclick="setArticleCatagory('gou5')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/news.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left;width: 90px;margin: 0px 0px 0px 5px">
						消息快讯
					</span>
					<span id="gou5" class="gou" style="color: #ffd02a; display: none;float: left;width: 50px ">
						√
					</span>
					<div style="clear: both;"></div>
				</div>
				<div id="color6" style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; " onmouseover="gaibiancolor('color6')" onmouseout="huifucolor('color6')" onclick="setArticleCatagory('gou6')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/zhuanti.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left;width: 90px;margin: 0px 0px 0px 5px">
						专题故事
					</span>
					<span id="gou6" class="gou" style="color: #ffd02a; display: none;float: left;width: 50px ">
						√
					</span>
					<div style="clear: both;"></div>
				</div>
			</div>
			<div id="addArticle" class="menu-message-box" style="width: 250px;height: 255px;background-color: #ffffff;cursor: pointer;position:absolute; z-index:1500; display: none;">
				<div class="menu-triangle-border menu-tb-background"></div>
				<div class="menu-triangle-border menu-tb-border"></div>
				<div style="font-size: 13px;font-weight: bold;color: blue;width: 250px;height: 25px;border-bottom: 1px solid #f8f8f8;">
					<span>你想说点啥？</span><span onclick="hideDiv('addArticle')" style="font-weight: bold; color: red;margin-left: 140px;font-size: 15px;">×</span>
				</div>
				<div id="color11" style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:50px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color11')" onmouseout="huifucolor('color11')" onclick="partCreateArticleMethod_showCreationDiv('向附近的人提个问题')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/questions.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left; margin: 0px 0px 0px 5px">
						向附近的人提个问题
					</span>
				</div>
				<div id="color22"  style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color22')" onmouseout="huifucolor('color22')" onclick="partCreateArticleMethod_showCreationDiv('有趣搞笑的东东')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/funny.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left; margin: 0px 0px 0px 5px">
						有趣搞笑的东东
					</span>
				</div>
				<div id="color33" style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color33')" onmouseout="huifucolor('color33')" onclick="partCreateArticleMethod_showCreationDiv('吃喝玩乐的好消息')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/foods.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left; margin: 0px 0px 0px 5px">
						吃喝玩乐的好消息
					</span>
				</div>
				<div id="color44" style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color44')" onmouseout="huifucolor('color44')" onclick="partCreateArticleMethod_showCreationDiv('这里的新鲜事')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/news.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left; margin: 0px 0px 0px 5px">
						这里的新鲜事
					</span>
				</div>
				<div id="color55" style="background-color: #ffffff;font-size: 18px;font-weight: bold;width: 250px;height:40px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color55')" onmouseout="huifucolor('color55')" onclick="partCreateArticleMethod_showCreationDiv('发布个专题')">
					<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
						<img src="<%=request.getContextPath() %>/resource/images/article/zhuanti.jpg" style="width: 30px;height: 30px">
					</span>
					<span style="color: #7c8084;float: left; margin: 0px 0px 0px 5px">
						发布个专题
					</span>
				</div>
			</div>
			<div id="select" class="menu-message-box" style="width: 300px;height: 345px;background-color: #ffffff;cursor: pointer;position:absolute; z-index:1500; display: none;">
				<div class="menu-triangle-border menu-tb-background"></div>
				<div class="menu-triangle-border menu-tb-border"></div>
				<div style="font-size: 13px;font-weight: bold;color: blue;width: 300px;height: 25px;border-bottom: 1px solid #f8f8f8;">
					<span>找找你感兴趣的内容？</span><span onclick="hideDiv('select')" style="font-weight: bold; color: red;margin-left: 140px;font-size: 15px;">×</span>
				</div>
				<div id="color111" style="background-color: #ffffff;font-size: 15px;font-weight: bold;width: 300px;height:100px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color111')" onmouseout="huifucolor('color111')">
					<div>
						<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
							<img src="<%=request.getContextPath() %>/resource/images/article/keyword_search.jpg" style="width: 30px;height: 30px">
						</span>
						<span style="color: #7c8084;float: left; margin: 0px 0px 0px 5px">
							找找主题内容
						</span>
					</div>
					<div style="margin-top: 10px">
						<span style="margin-left: 47px;"><input type="text" style="width: 180px;height: 20px;"></span><span><img src=""></span>
					</div>
				</div>
				<div id="color222"  style="background-color: #ffffff;font-size: 15px;font-weight: bold;width: 300px;height:200px;line-height: 40px; border-bottom: 1px solid #f8f8f8;" onmouseover="gaibiancolor('color222')" onmouseout="huifucolor('color222')">
					<div>
						<span style="width: 30px;height:30px;float: left;margin: 3px 0px 0px 10px;border: 1px solid #c0c0c0">
							<img src="<%=request.getContextPath() %>/resource/images/article/author_search.jpg" style="width: 30px;height: 30px">
						</span>
						<span style="color: #7c8084;float: left; margin: 0px 0px 0px 5px">
							找人
						</span>
					</div>
					<br/>
					<div style="margin-left: 47px;">
						<span style="color: #7c8084;">
							性别: <input type="radio" /><img src="" />女<input type="radio" /><img src="">男
						</span>
					</div>
					<div style="margin-left: 47px;">
						<span style="color: #7c8084">
							年龄:
						<select>
							<%
								for(int i = 16; i<80;i++){
							%>
							<option value="<%=i %>岁"><%=i %>岁</option>
							<%
								}
							%>
						</select>
						-
						<select>
						<%
							for(int i = 16; i<80; i++){
						%>
							<option value="<%=i %>岁"><%=i %>岁</option>
						<%
							}
						%>
						</select>
						</span>
					</div>
					<div style="margin-left:47px;">
						<span style="color: #7c8084">
							昵称:
						</span>
						<span>
							<input type="text" style="width: 180px">
						</span>
					</div>
					<div style="margin: 0px 0px 35px 200px;">
						<div style="color: #7c8084;width: 74px;height: 30px;border: 1px solid #c0c0c0;margin-bottom: 20px;line-height: 30px;background-color: #ffffff;">
							<div style="margin-left: 10px;">确定</div>
						</div>
					</div>
				</div>
			</div>
			<div id="hiddenAttr" style="display: none;">ALL</div>
		<div style="clear: both;"></div>




<%-- Javascript 区域 --%>
<script type="text/javascript">

//
//---------------------------------------- 全局变量 ------------------------------------------------
//
var partMenuAreaMethod_selectArticleImplementation = function() { alert("partMenuAreaMethod_selectArticleImplementation is not registered"); };
var partMenuAreaMethod_registerGetArticleCatagory = function() { alert("partMenuAreaMethod_registerGetArticleCatagory is not registered"); };

<%
	String methodName_selectArticleImplementation = request.getParameter("methodName_selectArticleImplementation");
	String methodName_registerGetArticleCatagory = request.getParameter("methodName_registerGetArticleCatagory");
	
	if (methodName_selectArticleImplementation != null) {
%>
		partMenuAreaMethod_selectArticleImplementation = <%= methodName_selectArticleImplementation %>;
<%
	}
	
	if (methodName_registerGetArticleCatagory != null) {
%>
		partMenuAreaMethod_registerGetArticleCatagory = <%= methodName_registerGetArticleCatagory %>;
<%		
	}
%>

//
//---------------------------------------- 自动执行代码 ------------------------------------------------
//
	// 注册获取话题分类的回调方法
	partMenuAreaMethod_registerGetArticleCatagory(getArticleCatagory);

//
//---------------------------------------- 对外公开的函数 ------------------------------------------------
//

//暂无
	
//
//---------------------------------------- 私有函数 ------------------------------------------------
//

//改变鼠标悬停在DIV上的DIV的颜色
function gaibiancolor(xinxi){
	$('#'+xinxi).css("background-color","#f3f3f3");
}
//恢复鼠标移走后DIV的颜色
function huifucolor(xinxi){
	$('#'+xinxi).css("background-color","#ffffff");
}
//对6个主题加勾，并做记号
function setArticleCatagory(id){

	var biaoti;
	$(".gou").css("display","none");
	$("#"+ id).css("display","block");

	if(id == "gou1"){
		biaoti = "ALL";
	}
	if(id == "gou2"){
		biaoti = "QUESTION";
	}
	if(id == "gou3"){
		biaoti = "FUNNY";
	}
	if(id == "gou4"){
		biaoti = "FOOD_SKITTLES";
	}
	if(id == "gou5"){
		biaoti = "NEWS";
	}
	if(id == "gou6"){
		biaoti = "SUBJECT";
	}
	$('#hiddenAttr').text(biaoti);
	hideDiv("classifyShow");
	selectArticleJqueryMethod_selectArticleImplementaion();
}

function getArticleCatagory() {
	return $('#hiddenAttr').text();
}




//点击显示隐藏的标签
	function xianshibiaoqian(id) {
		$('.menu-message-box').css('display','none');
		//$('#'+id).css('display','block');
		//$('#'+id).slideToggle("slow", "linear");
		//$('#'+id).fadeToggle("slow", "linear");
		//$('#'+id).toggle("slow", "linear");
		//$('#'+id).toggle("slow");
		//$('.menu-message-box').slideToggle("slow", "linear");
		$('#'+id).slideToggle("fast", "linear");
	}
	// 隐藏弹出标签DIV
	function hideDiv(id) {
		$('#'+id).css('display','none');
	}

</script>